<script setup>
import {onMounted, ref} from "vue";
import myAxios from "@/plugins/myAxios";
import {Message} from "@arco-design/web-vue";

const columns = [{
  title: '房间号',
  dataIndex: 'roomId',
}, {
  title: '类型',
  dataIndex: 'roomName',
}, {
  title: '状态',
  dataIndex: 'status',
  render: ({record}) => {
    // 根据 status 的值返回对应的状态文本
    switch (record.status) {
      case 0:
        return '空闲'; // status=0
      case 1:
        return '已住'; // status=1
      case 2:
        return '故障'; // status=2
    }
  }
}, {
  title: '日均价',
  dataIndex: 'price',
  render: ({record}) => {
    return `￥${record.price}`;
  }
}, {
  title: '操作',
  slotName: 'optional'
}];
const form = ref({
  roomId: '',
  roomName: '',
  status: '',
  price: '',
  search:'',
  selectedValue:''
})
//查询所有房间信息(admin)
const loadRoomData = async () =>{
  const res = await myAxios.get('/menu/roomInfo/list')
  roomData.value = res.data.data
  console.log("roomData:", roomData.value)
}

const roomData = ref([])

onMounted( () => {
   loadRoomData()
})

const addVisible = ref(false)
const visible = ref(false)
//点击修改按钮
const updateInfo = (record) => {
  form.value.roomId = record.roomId
  form.value.roomName = record.roomName
  form.value.price = record.price
  form.value.status = record.status
  visible.value = true;
}

//删除房间信息
const deleteInfo = async (record) => {
  const res = await myAxios.delete(`/menu/roomInfo/delete/${record.roomId}`)
  console.log("deleteRes:",res);
  if (res.data.code === '200'){
    Message.success("删除成功")
    await loadRoomData()
  }else {
    Message.error(res.data.msg)
  }
}
//更新房间信息-点击确定
const handleOk =async () => {
  const res = await myAxios.post('/menu/roomInfo/update',{
    roomId: form.value.roomId,
    roomName: form.value.roomName,
    price: form.value.price,
    status: form.value.status
  })
  if (res){
    Message.success('修改成功')
    await loadRoomData()
  }
}
const handleCancel = () => {
  visible.value = false;
}

//添加房间(admin)-点击确定
const addRoomOk = async () => {
  const res = await myAxios.post('/menu/roomInfo/add',{
     roomId: form.value.roomId,
     roomName: form.value.roomName
  })
  if (res){
    await loadRoomData();
    Message.success('添加成功')
  }else {
    Message.error('添加失败')
  }
}

//执行搜索
const doSearch = async() =>{
  const res = await myAxios.post('/menu/roomInfo/search',{
  key:form.value.selectedValue,
  value:form.value.search
})
  if (res.data.code === '200'){
    roomData.value = res.data.data
    Message.success("查询成功")
  }else {
    Message.error("查询失败")
  }
  console.log("searchRes:",res)
}

//导出Excel文档
const exportData = () =>{
  window.open('http://localhost:8081/menu/roomInfo/export')
}

//批量导入
const handleImport = async (response) =>{
   console.log("response:",response);
   if (response.response.code === '200'){
     await loadRoomData()
     Message.success("上传成功")
   }else {
     Message.error("上传失败")
   }
}

const pagination = {pageSize: 10}
</script>

<template>
    <div style="margin-bottom: 10px;display: flex">
      <a-button type="primary" @click="addVisible = true">新增</a-button>
      <a-button type="primary" style="margin-left: 10px" @click="exportData">全部导出</a-button>
      <div style="margin-left: 10px">
        <a-space direction="vertical" :style="{ width: '100%' } ">
          <a-upload action="http://localhost:8081/menu/roomInfo/import"  @success="handleImport" :show-file-list="false" />
        </a-space>
      </div>

      <a-space  direction="horizontal" size="large" style="margin-left: auto">
        <a-select v-model="form.selectedValue" style="margin-left: auto" :style="{width:'120px'}" placeholder="搜索属性" :trigger-props="{ autoFitPopupMinWidth: true }">
          <a-option>类型</a-option>
          <a-option>状态</a-option>
          <a-option>房号</a-option>
        </a-select>
        <a-input-search v-model="form.search" :style="{width:'320px'}" placeholder="搜索" search-button @search="doSearch"/>
      </a-space>
      <a-modal v-model:visible="addVisible" title="添加房间" @cancel="handleCancel" @ok="addRoomOk">
        <a-form :model="form">
          <a-form-item field="name" label="房间号">
            <a-input v-model="form.roomId" />
          </a-form-item>
          <a-space style="margin-left:100px" direction="vertical" size="large">
            <a-radio-group v-model="form.roomName">
              <a-radio :value="1">大床房</a-radio>
              <a-radio :value="2">双床房</a-radio>
              <a-radio :value="3">小床房</a-radio>
            </a-radio-group>
          </a-space>
        </a-form>
      </a-modal>
    </div>
    <a-table :columns="columns" :data="roomData" :pagination="pagination" style="font-style: normal;font-size: 30px">
      <template #optional="{ record }">
        <a-button type="primary" @click="updateInfo(record)">修改</a-button>
        <a-button style="margin-left: 10px" type="primary" status="danger" @click="deleteInfo(record)">删除</a-button>
        <a-modal v-model:visible="visible" title="修改信息" @cancel="handleCancel" @ok="handleOk">
          <a-form :model="form">
            <a-form-item field="roomId" label="房间号">
              <a-input v-model="form.roomId"/>
            </a-form-item>
            <a-form-item field="roomName" label="类型">
              <a-input v-model="form.roomName"/>
            </a-form-item>
            <a-form-item field="price" label="日均价">
              <a-input v-model="form.price"/>
            </a-form-item>
          </a-form>
          <a-space style="margin-left:100px" direction="vertical" size="large">
            <a-radio-group v-model="form.status">
              <a-radio :value="0">空闲</a-radio>
              <a-radio :value="1">已住</a-radio>
              <a-radio :value="2">故障</a-radio>
            </a-radio-group>
          </a-space>
        </a-modal>
      </template>
    </a-table>
</template>

<style scoped>

</style>